<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 图像透明度</title>
    <style type="text/css">
        /*  测试修改opacity */
        img.opacity{
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
        }
        img.opacity:hover{
            opacity: 1.0;
            filter: alpha(opacity=40);  /*For IE* and earlier  为了是适配IE8 和之前的版本 */
        }

        /* 创建文本在背景图像上的透明框  */
        div.background{
            width: 400px;
            height: 266px;
            margin: 10px;
            border: 1px solid #7a991a;
            background: url("../images/lufei_Potraite.JPG");
        }

        div.transbox{
            opacity: 0.6;
            filter: alpha(opacity=60);  /* 这个是适配IE 浏览器 做的 */
            width: 340px;
            height: 206px;  /*  通过控制 高度使得 文字看上去是显示居中的 */
            margin: 30px;
            border: 1px solid #0000ff;
            padding: 0px;
            background-color: #FFFFFF;
        }

        div.transbox p{
            margin: 30px 40px;
            color: #000000;
            font:bold 12px Verdana, Geneva, sans-serif;
            line-height:1.5;
        }

    </style>
</head>
<body>
    <img src="../images/eg_venus.gif" alt="Peach Blossom" class="opacity" />
    <p><b>注释：</b>在 IE 中，必须添加 <!DOCTYPE>，这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p>

    <!--   文字显示在一个半透明的背景上 -->
    <div class="background">
        <div class="transbox">
            <p>
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
                This is some text that is placed in the transparent box.
            </p>
        </div>
    </div>

</body>
</html>